<template>
  <div class="mod-config">
    <el-button-group style="margin-bottom: 10px;">
      <el-button type="primary" icon="el-icon-search" @click="searchHandle">查找</el-button>
      <el-button type="primary" icon="el-icon-delete" @click="searchReset">清空</el-button>
      <el-button v-if="permissions.admin_eimssalereturn_add" icon="el-icon-plus" type="primary" @click="addOrUpdateHandle()">新增</el-button>
    </el-button-group>
    <el-form inline label-width="100px" @keyup.enter.native="searchHandle()">
      <el-form-item label="销售单号" prop="billId">
        <el-input v-model="dataForm.billId" placeholder="销售单号"></el-input>
      </el-form-item>
      <el-form-item label="回访提醒" prop="returnFlag">
        <el-select v-model="dataForm.returnFlag" placeholder="回访提醒" clearable>
          <el-option label="已回访" :value="1"></el-option>
          <el-option label="已取消" :value="2"></el-option>
          <el-option label="未回访" :value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="类型" prop="type">
        <el-select v-model="dataForm.type" placeholder="类型">
          <el-option label="非塑型镜" :value="1"></el-option>
          <el-option label="塑型镜" :value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="销售单状态" prop="saleStatus">
        <el-select v-model="dataForm.saleStatus" placeholder="销售单状态" clearable>
          <el-option label="销售完成" :value="1"></el-option>
          <el-option label="已退货" :value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商品类别">
        <el-select v-model="dataForm.ctgId" placeholder="请选择商品类别" clearable>
          <el-option v-for="item in ctgOptions" :value="item.id" :label="item.name" :key="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="销售人员" prop="saleUserName">
        <el-input v-model="dataForm.saleUserName" placeholder="请输入销售人员"></el-input>
      </el-form-item>
      <el-form-item label="预约下次回访时间" prop="nextReturnDate" label-width="120px">
        <el-date-picker type="date" placeholder="选择日期" v-model="dataForm.nextReturnDate" value-format="yyyy-MM-dd"
          style="width: 100%;"></el-date-picker>
      </el-form-item>

    </el-form>
    <div class="avue-crud">
      <el-table :data="dataList" border v-loading="dataListLoading" :max-height="tableHeight">
        <el-table-column prop="customerName" label="患者名称"></el-table-column>
        <el-table-column prop="customerCard" label="患者卡号"></el-table-column>
        <el-table-column prop="billId" label="销售单号"></el-table-column>
        <el-table-column prop="goodsName" label="商品名称"></el-table-column>
        <el-table-column prop="ctgName" label="商品名称"></el-table-column>
        <el-table-column prop="supplyName" label="制造商名称"></el-table-column>
        <el-table-column prop="brandName" label="商品品种名称"></el-table-column>
        <el-table-column prop="deptName" label="销售门店/就诊部门"></el-table-column>
        <el-table-column prop="saleUserName" label="销售人员"></el-table-column>
        <el-table-column prop="saleDate" label="销售日期"></el-table-column>
        <el-table-column prop="batch" label="批次"></el-table-column>
        <el-table-column prop="invalidTime" label="失效日期"></el-table-column>
        <el-table-column prop="appointTime" label="预约回访日期" v-if="dataForm.type == 2"></el-table-column>
        <el-table-column prop="numberDay" label="效期截止天数"></el-table-column>
        <el-table-column prop="returnFlag" label="回访标识" :formatter="returnFlagFormatter"></el-table-column>
        <el-table-column label="操作" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" icon="el-icon-edit" @click="getReturnInfoLog(scope.row.id)">详情</el-button>
            <el-button type="text" icon="el-icon-edit" @click="addReturnInfoLog(scope.row.id,dataForm.type)" v-if="scope.row.saleStatus == 1 && permissions.eims_saleReturnLog_add">确认回访</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="avue-crud__pagination">
      <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" background layout="total, sizes, prev, pager, next">
      </el-pagination>
    </div>
    <table-form v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></table-form>
    <return-log v-if="addReturnInfoLogVisible" ref="addReturnLog" @refreshDataList="getDataList"></return-log>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { filterParams } from "@/util/tools"
  import { fetchList, delObj } from '@/api/eims/salereturn'
  import { getCtgDataList } from "@/api/eims/check"

  import TableForm from './salereturn-form'
  import ReturnLog from './salereturnlog-form'

  export default {
    data() {
      return {
        dataForm: {
          key: '',
          type: 1,
          saleStatus: 1
        },
        addReturnInfoLogVisible: false,
        ctgOptions: [],
        dataList: [],
        searchShow: true,
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        dataListLoading: false,
        addOrUpdateVisible: false
      }
    },
    components: {
      TableForm,
      ReturnLog
    },
    created() {
      this.getDataList();
      this.getCtgList()
    },
    computed: {
      ...mapGetters(['permissions']),
      tableHeight: function(){
        return window.innerHeight - 260
      }
    },
    methods: {
      // 获取数据列表
      getDataList() {
        let params1 = {
          current: this.pageIndex,
          size: this.pageSize
        };
        let params2 = filterParams(this.dataForm)
        this.dataListLoading = true
        fetchList(Object.assign(params1, params2)).then(response => {
          if(response.data.code == '0'){
            this.dataList = response.data.data.records
            this.totalPage = response.data.data.total
          }else{
            this.$message.error(response.data.msg)
          }
          this.dataListLoading = false
        })
      },
      // 每页数
      sizeChangeHandle(val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle(val) {
        this.pageIndex = val
        this.getDataList()
      },
      // 新增 / 修改
      addOrUpdateHandle(id) {
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.addOrUpdate.init(id)
        })
      },
      // 删除
      deleteHandle(id) {
        this.$confirm('是否确认删除ID为' + id, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(function() {
          return delObj(id)
        }).then(response => {
          if(response.data.code == '0'){
            this.$message.success('删除成功')
            this.getDataList()
          }else{
            this.$message.error(response.data.msg)
          }
        })
      },
      searchHandle() {
        this.pageIndex = 1;
        this.getDataList()
      },
      // 搜索清空
      searchReset() {
        for(let key in this.dataForm){
          this.dataForm[key] = ''
        }
      },
      handleSearchShow() {
        this.searchShow = !this.searchShow;
      },
      // 刷新回调
      refreshChange() {
        this.getDataList(this.page)
      },
      returnFlagFormatter(row, column, cellValue, index) {
        switch (cellValue) {
          case 1:
            return '已回访'
            break
          case 2:
            return '已取消'
            break
          case 3:
            return '未回访'
            break
        }
      },
      getCtgList() {
        getCtgDataList().then(response => {
          if(response.data.code == '0'){
            this.ctgOptions = response.data.data.records
          }else{
            this.$message.error(response.data.msg)
          }
        })
      },
      addReturnInfoLog(id, type) {
        this.addReturnInfoLogVisible = true
        this.$nextTick(() => {
          this.$refs.addReturnLog.init(id, type)
        })
      },
      getReturnInfoLog(id) {
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.addOrUpdate.init(id)
        })
      }
    }
  }
</script>
